<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="90"
          class="search-form"
        >
          <Form-item label="基地类型" prop="type">
            <Select
              v-model="searchForm.type"
              placeholder="请选择基地类型"
              clearable
              style="width: 200px"
            >
              <Option v-for="(item, k) in typeList" :key="k" :value="item.id">{{
                item.name
              }}</Option>
            </Select>
          </Form-item>
          <Form-item label="预约基地名称" prop="name">
            <Input
              type="text"
              v-model="searchForm.name"
              placeholder="请输入实践实训基地名称"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="预约用户" prop="username">
            <Input
              type="text"
              v-model="searchForm.username"
              placeholder="请输入预约用户"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="预约日期" prop="timeRange">
            <DatePicker
              v-model="searchForm.timeRange"
              type="daterange"
              placement="bottom-end"
              placeholder="请选择起止日期"
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="状态" prop="status">
            <Select
              v-model="searchForm.status"
              placeholder="请选择状态"
              clearable
              style="width: 200px"
            >
              <Option v-for="(i, k) in statusList" :key="k" :value="i.value">{{
                i.label
              }}</Option>
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
      />
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.rows"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        />
      </Row>
    </Card>
    <Modal
      v-model="detailFlag"
      :title="
        detailRow.status == 0 || detailRow.status == 1
          ? '强制释放基地'
          : '实践实训基地详情'
      "
      :footer-hide="detailRow.status != 0 && detailRow.status != 1"
      width="65%"
    >
      <div class="modal-info">
        <p>预约信息</p>
        <Row :gutter="20">
          <Col span="4" style="text-align: right; padding: 8px 10px">预约用户</Col>
          <Col span="20">
            <span v-if="detailRow.userType == 0">{{ detailRow.studentName || "用户" }}</span>
            <span v-if="detailRow.userType == 1">{{ detailRow.teacherName || "用户" }}</span>
            <span v-if="detailRow.userType == 2">{{ detailRow.username || detailRow.memberPhone || "用户" }}</span>
            <Tag color="warning" size="large" style="margin-left: 40px">{{
              detailRow.userType == 0
                ? "学生"
                : detailRow.userType == 1
                ? "教师"
                : "社会人员"
            }}</Tag>
            <div v-if="detailRow.status == 4" class="tag-refund">
              已退款{{ detailRow.refundPrice || 0 }}元
            </div>
            <div v-else class="tag-pay">已支付{{ detailRow.totalPrice || 0 }}元</div>
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">联系电话</Col>
          <Col span="20">
            <span v-if="detailRow.userType == 0">{{ detailRow.stuPhone }}</span>
            <span v-if="detailRow.userType == 1">{{ detailRow.tecPhone }}</span>
            <span v-if="detailRow.userType == 2">{{ detailRow.memberPhone }}</span>
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">所在单位</Col>
          <Col span="20">
            <span v-if="detailRow.userType == 0">{{ detailRow.clazz }}</span>
            <span v-if="detailRow.userType == 1">{{ detailRow.belongTo }}</span>
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">预约时段</Col>
          <Col span="20">
            <div v-for="(item, k) in detailRow.timeList" :key="k">
              {{ item }}
            </div>
          </Col>
        </Row>
        <Row :gutter="20" v-if="detailRow.status == 4">
          <Col span="4" style="text-align: right">取消事由</Col>
          <Col span="20">{{ detailRow.remarks }}</Col>
        </Row>
        <p>基本信息</p>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">基地所属单位</Col>
          <Col span="20">{{ detailRow.deptStr || "单位" }}</Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">实践实训基地名称</Col>
          <Col span="20">{{ detailRow.trainingBaseName || "名称" }}</Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">实践实训基地类型</Col>
          <Col span="20">
            {{ detailRow.trainingBaseTypeStr || "类型" }}
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">容纳人数</Col>
          <Col span="20">{{ detailRow.capacity || 0 }} 人</Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">基地地址</Col>
          <Col span="20">{{ detailRow.siteAddress || "地址" }}</Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">基地电话</Col>
          <Col span="20">{{ detailRow.telephone || "--" }}</Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">基地使用费用</Col>
          <Col span="20">{{ detailRow.unitPrice || 0 }} 元 / 小时</Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">基地照片</Col>
          <Col span="20">
            <img :src="detailRow.trainingBaseCover" class="imgs" />
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="4" style="text-align: right">实践实训基地介绍</Col>
          <Col span="20"> <div v-html="detailRow.trainingBaseDetail" /></Col>
        </Row>
        <div class="result">
          <img v-if="detailRow.status == '0'" src="@/assets/base_1.png" alt="待付款" />
          <img v-if="detailRow.status == '1'" src="@/assets/base_2.png" alt="未开始" />
          <img v-if="detailRow.status == '2'" src="@/assets/base_3.png" alt="使用中" />
          <img v-if="detailRow.status == '3'" src="@/assets/base_4.png" alt="已结束" />
          <img v-if="detailRow.status == '4'" src="@/assets/base_5.png" alt="已取消" />
        </div>
      </div>
      <Form
        ref="releaseForm"
        v-if="detailRow.status == 0 || detailRow.status == 1"
        :model="releaseForm"
        :rules="addRule"
        :label-width="90"
      >
        <Form-item
          label="取消事由"
          prop="remarks"
          required
          style="margin: 20px 20px 10px"
        >
          <Input
            type="text"
            v-model="releaseForm.remarks"
            placeholder="请输入取消事由"
            clearable
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="detailFlag = false">取消</Button>
        <Button type="primary" @click="submitForm">强制释放</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Train from "@/api/trainbase.js";

export default {
  name: "appoint-record",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        page: 1,
        rows: 10,
        type: null, //基地类型
        name: null, //基地名称
        username: null, //预约用户
        timeRange: [], //预约日期
        searchTimeBegin: null, //预约开始日期
        searchTimeEnd: null, //预约结束日期
        status: null, // 状态
      },
      typeList: [], //基地类型
      statusList: [
        // 状态列表
        { value: "0", label: "待付款" },
        { value: "1", label: "未开始" },
        { value: "2", label: "使用中" },
        { value: "3", label: "已结束" },
        { value: "4", label: "已取消" },
      ],
      columns: [
        // 表头
        { title: "序号", width: 100, type: "index" },
        {
          title: "预约基地名称",
          minWidth: 300,
          tooltip: true,
          render: (h, params) => {
            let func = [];
            if (params.row.trainingBaseCover) {
              func.push(
                h("img", {
                  attrs: { src: params.row.trainingBaseCover },
                  style: { width: "100px" },
                })
              );
            }
            if (params.row.trainingBaseName) {
              func.push(
                h("span", { style: { margin: "auto 10px" } }, params.row.trainingBaseName)
              );
            }
            return h("div", { style: { display: "flex" } }, func);
          },
        },
        { title: "基地类型", key: "trainingBaseTypeStr", minWidth: 120, tooltip: true },
        {
          title: "预约用户",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            let label = "";
            if (params.row.userType == "0") label = params.row.studentName;
            if (params.row.userType == "1") label = params.row.teacherName;
            if (params.row.userType == "2") label = params.row.username;
            return h("span", {}, label);
          },
        },
        {
          title: "用户类型",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            let label = "";
            if (params.row.userType == "0") label = "学生";
            if (params.row.userType == "1") label = "教师";
            if (params.row.userType == "2") label = "社会人员";
            return h("span", {}, label);
          },
        },

        {
          title: "联系电话",
          tooltip: true,
          minWidth: 180,
          render: (h, params) => {
            let label = "";
            if (params.row.userType == "0") label = params.row.stuPhone;
            if (params.row.userType == "1") label = params.row.tecPhone;
            if (params.row.userType == "2") label = params.row.memberPhone;
            return h("span", {}, label);
          },
        },
        {
          title: "所在单位",
          tooltip: true,
          minWidth: 180,
          render: (h, params) => {
            let label = "";
            if (params.row.userType == "0") label = params.row.clazz;
            if (params.row.userType == "1") label = params.row.belongTo;
            return h("span", {}, label);
          },
        },
        {
          title: "预约时段",
          tooltip: true,
          minWidth: 180,
          render: (h, params) => {
            let list = [];
            if (params.row.trainingBaseTimeStr) {
              list = params.row.trainingBaseTimeStr.split(",");
            }
            let times = list.map((item) => {
              return h("div", [h("span", {}, item)]);
            });
            return h("div", times);
          },
        },
        {
          title: "收费标准",
          tooltip: true,
          minWidth: 120,
          render: (h, params) => {
            let label = "免费";
            if (params.row.isCharge == 1) label = params.row.unitPrice + "元/小时";
            return h("span", {}, label);
          },
        },
        {
          title: "收费",
          key: "totalPrice",
          minWidth: 120,
          tooltip: true,
          render: (h, params) => {
            return h("span", {}, params.row.totalPrice + "元");
          },
        },
        {
          title: "状态",
          minWidth: 120,
          render: (h, params) => {
            let color = "#FF9900";
            let label = "待付款";
            if (params.row.status == 1) {
              label = "未开始";
              color = "#68CABE";
            }
            if (params.row.status == 2) {
              label = "使用中";
              color = "#18d401";
            }
            if (params.row.status == 3) {
              label = "已结束";
              color = "#AAAAAA";
            }
            if (params.row.status == 4) {
              label = "已取消";
              color = "#FF5C58";
            }
            return h("div", [
              h("div", {
                style: {
                  display: "inline-block",
                  width: "8px",
                  height: "8px",
                  backgroundColor: color,
                  marginRight: "6px",
                  borderRadius: "50%",
                },
              }),
              h("span", {}, label),
            ]);
          },
        },
        {
          title: "操作",
          align: "center",
          width: 100,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (params.row.status == 0 || params.row.status == 1) {
              func.push(this.btnDom(h, "warning", "强制释放", "handleView", params));
            } else {
              func.push(this.btnDom(h, null, "查看", "handleView", params));
            }
            return h(
              "div",
              { style: { display: "flex", justifyContent: "center" } },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      detailFlag: false, //详情弹窗
      detailRow: {}, //详情信息
      releaseForm: {
        // 强制释放
        remarks: "",
      },
      addRule: {
        // 验证规则
        remarks: [{ required: true, message: "请输入取消事由" }],
      },
    };
  },
  watch: {
    detailFlag(val) {
      if (val) {
        this.releaseForm.remarks = "";
        this.$refs.releaseForm.resetFields();
      }
    },
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.searchForm.rows = 10;
      this.getData();
    },
    // 强制释放/查看
    handleView(v) {
      API_Train.getTrainBaseInfo(v.trainingBaseId).then((res) => {
        if (res.success) {
          if (v.trainingBaseTimeStr) {
            v.timeList = v.trainingBaseTimeStr.split(",");
          }
          this.detailRow = Object.assign(res.result, v);
          this.detailFlag = true;
        }
      });
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 提交设置
    submitForm() {
      let params = {
        id: this.detailRow.id,
        remarks: this.releaseForm.remarks,
      };
      this.$refs.releaseForm.validate((valid) => {
        if (valid) {
          // 单个提交
          API_Train.postTrainBaseCancel(params).then((res) => {
            if (res.success) {
              this.$Message.success("释放成功！");
              this.detailFlag = false;
              this.detailRow = {};
              this.getData();
            }
          });
        }
      });
    },
    // 日期格式处理
    formatDate(date) {
      if (date) {
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let m = month >= 10 ? month : "0" + month;
        let d = day >= 10 ? day : "0" + day;
        return `${year}-${m}-${d}`;
      } else {
        return null;
      }
    },
    //查询会员列表
    getData() {
      let params = Object.assign({}, this.searchForm);
      params.searchTimeBegin = this.formatDate(params.timeRange[0]);
      params.searchTimeEnd = this.formatDate(params.timeRange[1]);
      delete params.timeRange;

      this.loading = true;

      API_Train.postTrainBaseOrderList(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.list;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取实训基地类型
    getBaseType() {
      API_Train.getTrainBaseType().then((res) => {
        if (res.success) {
          this.typeList = res.result;
        }
      });
    },
  },
  mounted() {
    this.getBaseType();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  p {
    font-weight: bold;
    margin: 20px 0;
    color: #000;
  }
  p::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 18px;
    vertical-align: top;
    border-radius: 2px;
    margin-left: 40px;
    margin-right: 20px;
    background-color: #ff0000;
  }
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .tag-refund {
    display: inline-block;
    padding: 8px 12px;
    margin-left: 20px;
    border: 1px dashed #f00;
    border-radius: 6px;
    color: #f00;
  }
  .tag-pay {
    display: inline-block;
    padding: 8px 12px;
    margin-left: 20px;
    border: 1px dashed #ffc4c2;
    border-radius: 6px;
    color: #ff5c58;
  }
  .imgs {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    border-radius: 8px;
    overflow: hidden;
  }
  .result {
    position: absolute;
    left: 50%;
    top: 30%;
    img {
      margin: 0;
    }
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
